<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绑定印章</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/layui.css" rel="stylesheet"  media="all">
</head>
<body>

<table id="seal-list"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-inline">
    <input class="layui-input" name="keywords" id="keywords" placeholder="请输入印章名称或MAC地址" autocomplete="off" lay-affix="clear">
  </div>
  <button class="layui-btn" lay-event="search">搜索</button>
  <button class="layui-btn layui-btn-sm" lay-event="btnExport">全部导出</button>
</script> 
<script type="text/html" id="expireStatusTpl">
    {{#  if(d.expireStatus ==0 ){ }}
        <p>否</p>
    {{#  } else { }}
        <p>是</p>
    {{# } }}
</script>
<script type="text/html" id="statusTpl">
    {{#  if(d.status ==0 ){ }}
        <p style="color: #e40e0e">已删除</p>
    {{#  } else if(d.status ==1 ){ }}
        <p style="color: #77797a">已停用</p>
    {{#  } else { }}
        <p style="color: #117dd4">已绑定</p>
    {{# } }}
</script>
<script src="js/layui.js"></script>
<script type="module">
    import seal from './js/seal.js'
    
    layui.use(['table', 'layer', 'laydate'], function () {
        var $ = layui.$;
        var table = layui.table;
        var laydate = layui.laydate;

        // 加载印章列表
        var loadSealList = function(keywords,isExport){
            seal.getSealList($,keywords,function(rspData){
            //表格数据渲染
            var insTable = table.render({
                elem: '#seal-list'
                ,title:'绑定印章列表'
                ,toolbar:'#toolbarDemo'
                ,width: 1360
                ,height: 600
                ,size: 'lg'
                ,cols: [[{ type:"numbers", width:80, title: '序号', sort: true, fixed: 'left'}
                ,{field:'id', hide:true}
                ,{field:'name', width:200, title: '印章名称',fixed:"left"}
                ,{field:'mac', width:180, title: 'MAC地址' ,fixed:"left"}
                ,{field:'companyName', width:200, title: '所属企业',fixed:"left"}
                ,{field:'userName', width:120, title: '创建人',fixed:"left"}
                ,{field:'phoneNumber', width:120, title: '电话',fixed:"left"}
                ,{field:'serviceTime', width:160, title: '服务时间',sort:true, event:'updateServiceTime', fixed:"left" }
                ,{field:'expireStatus', width:120, title: '是否过期', sort:true, templet:'#expireStatusTpl', fixed:"left"}
                ,{field:'status', width:120, title: '印章状态', templet:'#statusTpl', sort:true}
                ,{field:'createTime', width:160, title: '创建时间'}
                ]]
                ,data: rspData.data
                ,done:function(){
                    $('#keywords').val(keywords);
                }
                ,even: true
                ,page: true //是否显示分页
                ,limits: [20,50,100]
                ,limit: 20 //每页默认显示的数量
                });
                if(isExport){
                    table.exportFile(insTable.config.id,rspData.data,'xls');
                }
            })
        }
        loadSealList(null);

        // 工具栏事件
        table.on('toolbar(seal-list)', function(obj){
            switch(obj.event){
                case 'search':
                    var keywords = $('#keywords').val();
                    loadSealList(keywords);
                break;
                case 'btnExport':
                    var keywords = $('#keywords').val();
                    loadSealList(keywords,true);
                break;
            };
        });
        //触发单元格工具事件
        table.on('tool(seal-list)', function(obj){
            var field = $(this).data('field');
            laydate.render({
                elem: this.firstChild
                ,type:'datetime'
                , show: true //直接显示
                , closeStop: this
                , done: function (value, date) {
                    var sealData = { id : obj.data.id,newServiceTime:value};
                    seal.updateSealServiceTime($,sealData,function(rspData){
                        if(rspData.code == 1){
                            var update = {};
                            update[field] = value;
                            obj.update(update);
                            layer.msg("修改成功");
                        }
                    })
                }
            });
        });
    });
</script>
</body>

</html>